import animationsData from './animations'
export declare type DirectiveModifiers = Record<string, boolean>

const animations: Array<string> = [...animationsData]


const animationEnd = (
  el: HTMLElement,
  value: any,
  modifiers?: DirectiveModifiers
) => {
  if (modifiers?.once) return
  el.addEventListener(
    'animationend',
    () => {
      const classes = el.classList
      animations.forEach((item) => {
        item = `animate__${item}`
        if (classes.contains(item)) {
          el.classList.remove(item)
          if (value.removeAfterAnimation) {
            el.parentNode && el.parentNode.removeChild(el)
          }
        }
      })
    },
    false
  )
}

export const animateNow = (
  el: any,
  value: any,
  modifiers?: DirectiveModifiers,
  isRemove = false
) => {
  const { classes, duration, delay, iteration, isCustom,remove} = value

  el.style['animation-duration'] = `${duration || 500}ms`

  el.style['animation-delay'] = `${delay || 1}ms`

  if (iteration) {
    el.style['animation-iteration-count'] = `${iteration}`
  }

  if (isCustom) {
    if (el.classList.contains(classes)) return
    el.className = `${el.classList.value} animate__animated ${classes}`
  } else {
    if (el.classList.contains(`animate__${classes}`)) return
    el.className = `${el.classList.value} animate__animated animate__${classes}`
  }

  if (isRemove) {
    animationEnd(el, value, modifiers)
  }
  if (remove) {
    animationEnd(el, value, modifiers)
  }
}
